<template>
  <div class="form-statistics-container">
    <div class="qs-box">
      <div class="top-box">
        <div class="label-box">
          <span class="index">{{formItem.labelIndex}}、</span>
          <span class="label">{{formItem.label}}</span>
          <span class="cmp-type">{{`[${formItem.compName}]`}}</span>
        </div>
        <div class="writer-num">收集结果：{{formItem.writerNum}}条
          <el-button v-if="!props.showAll" size="small" type="" @click="handleShowAll">查看更多</el-button>
        </div>
      </div>
      <div class="table">
        <el-table max-height="400px" :data="props.showAll ? formItem.result : formItem.result.slice(-4)" style="width: 100%" border>
          <el-table-column prop="index" label="序号" width="200" align="center"/>
          <el-table-column label="内容" align="center">
            <template #default="{row}">
              <div class="file-box">
                <span 
                  class="file"
                  v-for="(file, fileIndex) in row.file" 
                  :key="fileIndex"
                  @click="downLoadFile(file)"
                >
                  {{file.fileName}}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { fileSecretKey } from "@/views/form/manage/design/config/formCmpConfig.js"
const props = defineProps({
  formItem: {
    type: Object,
  },
  showAll: {
    type: Boolean,
    default: false
  },
})
const formItem = computed(()=>{return props.formItem})
// 下载附件
const downLoadFile = (file) => {
  window.open(file.url + fileSecretKey)
}
const emit = defineEmits(['handleShowAll'])
const handleShowAll = () => {
  emit('handleShowAll', formItem.value)
}
</script>
<style scoped lang='scss'>
.table{
  .file-box{
    display: flex;
    flex-direction: column;
    .file{
      margin-right: 10px;
      color: $mainColor;
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
    }
  }
}
</style>